<template>
  <div>
    <h1>v-if v-show v-for</h1>
    <!-- @click后面跟函数 -->
    <!-- <button @click="toggle">切换</button> -->
    <!-- @click后面也可以写表达式 -->
    <button @click="flag = !flag">切换</button>
    <!-- v-if显示隐藏  标签的销毁与重建 -->
    <!-- <p v-if="!flag">{{msg}}</p> -->
    <!-- v-show显示隐藏  标签的display属性的变化 当隐藏时display:none -->
    <p v-show="flag">{{msg}}</p>

    <!-- v-if v-else -->
    <p v-if="flag">{{msg}}</p>
    <p v-else>张栋继续站着！！</p>
    <!-- v-if v-else-if -->
    <!-- if  else if  else -->
    <!-- 请嫁给我    我考虑考虑  勉强答应吧 -->
    <p>请嫁给我吧？</p>
    <p v-if="flag1">我考虑考虑</p>
    <p v-else-if="flag1">勉强答应吧</p>
    <p v-else>有房有车有五百万吗？</p>
    <p v-show="flag">{{msg}}</p>
    <!-- v-for 遍历 -->
    <!-- v-for遍历数组 第一参数是数组的每一项，参数二：下标  可以使用in 也可以使用of   :key 不能重复，具有唯一性 -->
    <!-- 遍历数组主要用来遍历数组套对象的数组 -->
    <ul>
      <li v-for="(item,index) of arr" :key="index">{{index}}---{{item}}</li>
    </ul>
    <!-- 遍历对象 第一个参数value属性值  第二个参数 key 属性名  第三个参数为下标-->
    <ul>
      <li v-for="(value,key,index) of obj" :key="index">{{key}}--{{value}}--{{index}}</li>
    </ul>

    <ul>
      <li v-for="(item,index) in arr_obj" :key="index">{{item.name}}</li>
    </ul>
    <button @click="add">往数组尾部添加</button>
    <p>{{test}}</p>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      flag: true,
      flag1: false,
      msg: "有弟弟好吗？打弟弟要趁早！！",
      arr: [1, 2, 3, 8],
      obj: {
        name: "大山",
        age: 88,
        hobby: "rap"
      },
      arr_obj: [
        { id: 1, name: "小山", age: 70, hobby: "KTV" },
        { id: 2, name: "大山", age: 88, hobby: "rap" },
        { id: 3, name: "老山", age: 188, hobby: "打篮球" }
      ],
      test: 0
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    toggle() {
      this.flag = !this.flag;
    },
    add() {
      this.arr_obj.unshift({
        id: 4,
        name: "巨山",
        age: 270,
        hobby: "KTV"
      });
    }
  },

  watch: {}
};
</script>
<style lang='' scoped>
</style>